<template>

    <mi-list-page>
        <mi-table :list="list">
            <template #topBar>
                <mi-top-bar :data="topToolbar" />
            </template>
            <template #toolbar="{row}">
                <span v-if="row.id==1" class="f_secondary">超级管理员不能编辑</span>
                <el-space wrap v-else>
                    <el-button
                               link
                               type="primary"
                               @click="lineBarEvent(row, 'edit')"
                               v-auth="auth.edit"
                    >编辑</el-button>
                    <el-button
                        link
                        type="primary"
                        @click="lineBarEvent(row, 'del')"
                        v-auth="auth.del"
                    >删除</el-button>
                </el-space>
            </template>
        </mi-table>
    </mi-list-page>

    <site-user-edit :center="false" v-model:edit="edit" :list="list" />

<!--    <mi-dialog v-model="password.show" title="设置密码" width="500px">-->
<!--        <admin-password  />-->
<!--    </mi-dialog>-->

</template>

<script setup lang="ts">
import {provide, reactive} from "vue";
import global from "@/dict/global";
import {makeModelAuth} from "@/utils/auth";
import List from "@/model/list";
import Edit from "@/model/edit";
import SiteUserEdit from "@/views/auth/siteUserEdit.vue";


const auth = makeModelAuth("auth.siteUser")
const tdWidth = global.tdWidth

const topToolbar = [
    {
        auth: auth.add,
        type: 'success',
        icon: 'Plus',
        title: '新增',
        event: (ids:number[]) => {
            edit.show = true
            list.currentRow = null
        }
    },
    {
        auth: auth.del,
        title: '删除',
        type: 'danger',
        icon: 'Delete',
        event: (ids:number[]) => {
            list.del({
                url: `/${auth.del}`,
                ids: ids,
            })
        }
    },
]

const lineBarEvent = (row:any, type:string) => {
    switch (type) {
        case 'edit':
            edit.show = true
            list.currentRow = row
            break
        case 'del':
            list.del({
                url:`/${auth.del}`,
                ids:[row.id]
            })
            break
    }
}


const list = reactive(new List({
    url: `/${auth.index}`,
    columns:[
        {name: "id", type:'selection'},
        {name: "groupTitle", title: "角色", width: tdWidth.cate},
        {name: "username", title: "账号"},
        {name: "loginTime", title: "最后登录时间"},
        {name: "login_ip", title: "最后登录ip"},
        {name: "status", title: "状态", width: tdWidth.switch, type:"switch", align: "center"},
        {name: "create_time", title: "添加时间", width: tdWidth.date, sort:true,},
        {name: "update_time", title: "更新时间", width: tdWidth.date, sort:true,},
        {title: "操作", type:'slot', slot:'toolbar'},
    ],
}))

const edit = reactive(new Edit({}))

provide("list", list)


</script>
